<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-row class="search-input">
          <el-form-item prop="memberAccount" label="评论手机号：">
            <el-input v-model="filters.memberAccount" clearable placeholder="评论人手机号"></el-input>
          </el-form-item>
          <el-form-item prop="content" label="评论内容：">
            <el-input v-model="filters.content" clearable placeholder="评论内容"></el-input>
          </el-form-item>
          <el-form-item prop="channel" label="评论来源：">
            <el-select
              clearable
              v-model="filters.channel"
              style="width:200px"
              placeholder="请选择评论来源"
              clearable
            >
              <el-option
                v-for="item in channelList"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"/>
          </el-form-item>
          <!-- <el-form-item>
            <kt-button label="导出评论" type="primary" @click="handleAdd" />
          </el-form-item>-->
        </el-row>
      </el-form>
    </div>
    <div class="tab-container">
      <el-alert
        :closable="false"
        style="background-color: #ffffff;color: #ffffff;"
        title=""
        type="success"
      />
      <div style="text-align:right;">
      </div>
      <el-tabs v-model="tabs" @tab-click="handleClick">
        <el-tab-pane label="全部评论" name="1"></el-tab-pane>
        <el-tab-pane label="初次评论" name="2"></el-tab-pane>
        <el-tab-pane label="追加评论" name="3"></el-tab-pane>
      </el-tabs>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border=""
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="createTime" label="评论时间" width="180"></el-table-column>
        <el-table-column prop="memberAccount" label="评论人账号" width="180"></el-table-column>
        <el-table-column prop="orderNo" label="订单编号"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="startNum" label="商品评分"></el-table-column>
        <el-table-column prop="content" label="评论内容"></el-table-column>
        <el-table-column label="评论图片">
          <template slot-scope="scope">
            <span v-for="(file , index) in scope.row.fileList" :key="index">
              <img :src="file.url" style="width: 100px;">
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="channel" label="评论来源"></el-table-column>
        <el-table-column prop="stickyStatus" label="置顶状态">
          <template slot-scope="scope">
            <span v-if="scope.row.stickyStatus == 0">未置顶</span>
            <span v-if="scope.row.stickyStatus == 1">已置顶</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">待审核</span>
            <span v-if="scope.row.status == 1">审核通过</span>
            <span v-if="scope.row.status == 2">审核拒绝</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" align="center" label="操作" width="290">
          <template slot-scope="scope">
            <el-button type="text" class="textButton" @click="handleDetail(scope.row)">查看</el-button>
<!--            <el-button type="text" class="textButton" @click="pass(scope.row.id)" v-if="scope.row.status == 0 || scope.row.status == 2">审核通过</el-button>-->
<!--            <el-button type="text" class="textButton" @click="noPass(scope.row.id)" v-if="scope.row.status == 0 || scope.row.status == 1">审核不通过</el-button>-->
            <el-button type="text" class="textButton" @click="auditForm(scope.row.id)">审核</el-button>
            <el-button type="text" class="textButton" @click="reply(scope.row.id)">回复</el-button>
            <el-button
              type="text"
              class="textButton"
              @click="sticky(scope.row.id)"
              v-if="scope.row.status == 1 && scope.row.stickyStatus == 0"
            >置顶
            </el-button>
            <el-button
              type="text"
              class="textButton"
              @click="stickyCancel(scope.row.id)"
              v-if="scope.row.status == 1 && scope.row.stickyStatus == 1"
            >取消置顶
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏v-if="scope.row.status == 1"-->
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="currentChange"
          :current-page="filters.start"
          :page-size="filters.limit"
          :total="totalSize1"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
        ></el-pagination>
      </div>
    </div>

<!--    评论审核-->
    <el-dialog title="评论审核" width="30%" :visible.sync="reviewFormVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="searchFilters">

        <el-row class="searchDialog-input">
         审核结果 :     <el-radio v-model="dataForm.status" label="1" value="1">审核通过</el-radio>
          <el-radio v-model="dataForm.status" label="2" value="2">审核不通过</el-radio>
        </el-row>

        <el-form-item label="审核不通过原因：" prop="content" width="100%" v-show="dataForm.status==2">
          <el-input v-model="dataForm.content" type="textarea" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button @click.native="reviewFormVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button type="primary" @click.native="reviewSuccess">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>



    <!--详情查看-->
    <el-dialog title="详情查看" width="60%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form
        :model="dataForm"
        :inline="true"
        label-width="120px"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <el-row class="searchDialog-input">
          <el-form-item label="评论时间：">{{dataForm.createTime}}</el-form-item>
          <el-form-item label="商品编码：" prop="pro_number">{{dataForm.productCode}}</el-form-item>
          <el-form-item label="评论人：" prop="contene_name">{{dataForm.memberAccount}}</el-form-item>
          <el-form-item label="商品类目：" prop="productItemName">{{dataForm.productType}}</el-form-item>
          <el-form-item label="订单编号：" prop="order_no">{{dataForm.orderNo}}</el-form-item>
          <el-form-item label="商品名称：" prop="name">{{dataForm.productName}}</el-form-item>
          <el-form-item label="置顶状态：" prop="is_up">{{dataForm.stickyStatus}}</el-form-item>
          <el-form-item label="审核状态：" prop="status">{{dataForm.status}}</el-form-item>
          <el-form-item label="审核时间" prop="shenhe_time">{{dataForm.updateTime}}</el-form-item>
          <el-form-item label="来源：" prop="source">{{dataForm.channel}}</el-form-item>
          <el-form-item label="商品评分：" prop="score">{{dataForm.startNum}}</el-form-item>
          <el-form-item label="内容：" prop="content">{{dataForm.content}}</el-form-item>
          <el-form-item label="图片：" prop="img">
          <span v-for="(file , index) in dataForm.fileList" :key="index">
            <img style="width:100px;" :src="file.url">
          </span>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisible = false">
          {{
          $t("action.cancel")
          }}
        </el-button>
      </div>
    </el-dialog>
    <!--回复-->
    <el-dialog title="回复内容" width="60%" :visible.sync="dialogVisibleReply">
      <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
        <!--表格显示列界面-->
        <table-column-filter-dialog
          ref="tableColumnFilterDialog"
          :columns="columns"
          @handleFilterColumns="handleFilterColumns"
        ></table-column-filter-dialog>
      </div>
      <!--表格内容栏-->
      <jic-table
        :height="350"
        :data="pageResult"
        :totalSize="totalSize"
        :columns="filterColumns"
        @findPage="queryPageReply"
        :showDeleteOperation="false"
        :showEditOperation="false"
        :showDetailOperation="false"
        :showBatchDelete="false"
        :showOperation="false"
        ref="JicTable"
      ></jic-table>
      <div style="padding-top: 25px;">
        <el-form
          :model="dataForm"
          :inline="true"
          label-width="80px"
          ref="dataForm"
          :size="size"
          label-position="right"
        >
          <el-form-item label="回复">
            <el-input type="textarea" v-model="replyContent" placeholder="请输入内容"/>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisibleReply = false">
          {{
          $t("action.cancel")
          }}
        </el-button>
        <el-button :size="size" type="primary" @click="submitFormReply">{{ $t("action.submit") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import {darkmagenta} from "color-name";
  import JicTable from "@/views/Core/JicTable";

  export default {
    name: "Tab",
    components: {
      KtButton,
      JicTable,
      TableColumnFilterDialog
    },
    data() {
      return {
        loading: false,
        tabs: "1",
        reviewFormVisible: false,
        selectionChangeList: [],
        filters: {
          start: 1,
          limit: 10
        },
        dataForm: {},
        id:0,
        size: "small",
        replyContent: "",
        totalSize: 0,
        totalSize1: 0,
        columns: [],
        filterColumns: [],
        pageResult: {},
        dialogVisible: false,
        dialogVisibleReply: false,
        multipleSelection: [],
        tableData: [],
        pageRequest: {
          start: 1,
          limit: 10,
          commentId: null,
        },
        channelList: [{value: "H5"}, {value: "PC"}]
      };
    },

    methods: {
      handleClick(tab, event) {
        // console.log(tab, event);
        console.log(tab.index);
        if (tab.index == "0") {
          //查询全部
          this.filters.type = null;
          this.findPage();
        } else if (tab.index == "1") {
          this.filters.type = 1;
          this.findPage();
        } else {
          this.filters.type = 2;
          this.findPage();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(multipleSelection);
      },
      //查看评论
      handleDetail: function (rows) {
        let id = rows.id;
        let this_ = this;
        this_.utils.request.getProductCommentInfo({id: id}, res => {
          this_.dialogVisible = true;
          this_.dataForm = res.data;
        });
      },
      //页面数据初始化
      findPage: function (data) {
        this.loading = true;
        let this_ = this;
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.utils.request.getProductCommentPage(this_.filters, function (res) {
          this_.tableData = res.data.rows;
          this_.totalSize1 = Number(res.data.total);
          this_.loading = false;
        });
      },
      //分页
      currentChange(start) {
        this.filters.start = start;
        this.findPage();
      },
      sizeChange(limit) {
        this.filters.start = 1;
        this.filters.limit = limit;
        this.findPage();
      },
      submitFormReply: function () {
        let that = this;
        if (this.replyContent == "") {
          this.$message({message: "请输入回复内容", type: "error"});
          //  return false;
        } else {
          this.utils.request.updateProductCommentReplyInfo(
            {content: this.replyContent, commentId: this.pageRequest.commentId},
            res => {
              that.$message({message: "操作成功", type: "success"});
              that.dialogVisibleReply = false;
              that.findPage();
            }
          );
        }
      },
      reply: function (id) {
        this.pageRequest.commentId = id;
        this.queryPageReply();
        this.replyContent = "";
        this.dialogVisibleReply = true;
      },
      queryPageReply: function () {
        let that = this;
        this.utils.request.getProductCommentReplyPage(that.pageRequest, function (
          res
        ) {
          if (res.data.rows == null) {
            res.data.rows = [];
            res.data.total = 0;
          }
          that.$refs.JicTable.findPage({
            content: res.data.rows,
            total: res.data.total
          });
        });
      },
      // 导出评论
      handleAdd: function () {
        this.dialogVisible = true;
        this.operation = true;
        this.dataForm = {};
      },
      //批量审核通过
      batchCheckYes: function (data) {
        if (this.selections.length == 0) {
          this.$message({message: "请选择要操作的数据", type: "error"});
          return;
        } else {
          this.$message({message: "操作成功", type: "success"});
        }
      },
      //批量审核不通过
      batchCheckNo: function (data) {
        if (this.selections.length == 0) {
          this.$message({message: "请选择要操作的数据", type: "error"});
          return;
        } else {
          this.$message({message: "操作成功", type: "success"});
        }
      },
      //筛选条件下全部审核通过
      allCheckYesByFilters: function () {
        this.$message({message: "操作成功", type: "success"});
      },
      isUp: function (row) {
        let this_ = this;
        this_.upShow = true;
        this_.upShows = false;
        this.$message({message: "置顶成功", type: "success"});
      },
      noUp: function (row) {
        let this_ = this;
        this_.upShow = false;
        this_.upShows = true;
        this.$message({message: "取消置顶成功", type: "success"});
      },
      pass: function (id) {
        let this_ = this;
        this.utils.request.updateProductComment({id: id, status: 1}, res => {
          this_.$message({message: "操作成功", type: "success"});
          this_.findPage();
        });
      },
      noPass: function (id) {
        let this_ = this;
        this.utils.request.updateProductComment({id: id, status: 2}, res => {
          this_.$message({message: "操作成功", type: "success"});
          this_.findPage();
        });
      },
      getList() {
        this.loading = true;
        this.$emit("create"); // for test
        // fetchList(this.listQuery).then(response => {
        var key = "status" + this.listQuery.type;
        this.list = this.tableList[key];
        this.loading = false;
        // })
      },
      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property]);
      },

      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.findPage();
        }
      },
      createPage() {
        this.$router.push("/CreateHandsel");
      },
      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      // 处理表格列过滤显示
      initColumns: function () {
        this.columns = [
          {prop: "creatorName", label: "回复人", minWidth: 120},
          {prop: "content", label: "回复内容", minWidth: 120},
          {prop: "createTime", label: "回复时间", minWidth: 120}
        ];
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },
      sticky(id) {
        this.$confirm("确认要将该评论置顶吗？", "确认提示", {}).then(() => {
          let this_ = this;
          this.utils.request.stickProductComment({id: id}, res => {
            this_.$message({message: "操作成功", type: "success"});
            this_.findPage();
          });
        })
      },

      stickyCancel(id) {
        this.$confirm("确认要将该评论取消置顶吗？", "确认提示", {}).then(() => {
          let this_ = this;
          this.utils.request.updateProductComment(
            {id: id, stickyStatus: 0},
            res => {
              this_.$message({message: "操作成功", type: "success"});
              this_.findPage();
            }
          );
        })
      },
      auditForm:function(id){
        this.id=id;
        this.reviewFormVisible=true;
      },

      reviewSuccess: function (id) {
        this.reviewFormVisible=true;

          if(this.dataForm.status===null || this.dataForm.status===undefined ||this.dataForm.status===0 ){
          }else{
            if(this.dataForm.status==1){
             this.pass(this.id)
            }else{
            this.noPass(this.id)
            }
          }



      },




    },
    watch: {
      activeName(val) {
        this.$router.push(`${this.$route.path}?tab=${val}`);
      }
    },
    created() {
      // init the default selected tab
      // const tab = this.$route.query.tab;
      // if (tab) {
      //   this.activeName = tab;
      // }
    },
    mounted() {
      this.findPage();
      this.initColumns();
    }
  };
</script>
<style lang="scss" scoped>
  .right {
    text-align: right;
  }
</style>
